<template>
	<view class='page'>

		<view class='poater'>
			<view class='poater-main'>
				<!-- mode='center' -->
				<image class='poater-main-img' :src="filePaths"></image>
				<view class='poater-main-info'>
					<view class='info-left'>
						<view class='info-left-name'>
							<image class='info-left-img' :src="userInfo.avatarUrl"></image>
							<text>{{userInfo.name}}</text>
						</view>
						<view class='info-left-details'>详情请您识别二维码,谢谢</view>
					</view>
					<view class='info-right'>
						<image class='poater-main-ewm' :src="code" @tap='preview' :data-code="code"></image>
						<text>长按识别</text>
					</view>
				</view>
				<view class='info-text'>在微信内识别您的海报，将进入您的名片或店铺。联系客服：可免费帮您定制海报！</view>
			</view>
		</view>
		<view class='poster-bottom'>
			<view class='add-poster' @tap='chooseImage'>添加图片</view>
			<view class='generate-poster' @tap='generate'>生成名片海报</view>
		</view>

		<view class="canvas-box">
			<canvas style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas" />
		</view>

	</view>
</template>

<script>
	import app from '@/App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js'
	export default {
		onLoad: function(options) {
			if (options.id) {
				var id = options.id;
				this.getMerchantCode(id);
				this.getInfoDetails(id);
			} else {
				// let id = app.globalData.userInfo.id;
				// console.log(id);
				
				// this.getInfoDetails(id);
				var arr=this.main_getGlobal();
				this.getUserInfo(arr.token,arr.type);
				this.getEwmCode(id);
			}
		},
		data() {
			return {
					code: '',
					filePaths: '',
					maskHidden: false,
					posterPaths: '',
					userInfo: {},
					logoImgPath: '',
					ewmImgPath: '',
					base64: '',
			}
		},
		methods: {
			//得到用户信息
			getInfoDetails: function(id) {
				gyzjModel.prototype.getWorkerDetail(id).then(data => {
					switch (data.code) {
						case 1:
							 data = data.data;;
							data.name = data.name.slice(0,4);
							this.userInfo=data;
							this.logoImgPath=data.avatarUrl;
							uni.hideLoading();
							break;
						default:
							uni.hideLoading();
							uni.showToast({
								title: data.message,
								icon: 'none'
							})
							break;
					}
				});
			},
			// 获取个人信息
			getUserInfo: function(token, type) {
				console.log('方法进来token', token);
				console.log('方法进来type', type);
				let that=this;
				gyzjModel.prototype.getUserInfo(token, type).then(data => {
					console.log('data的值',data);
					switch (data.code) {
						case 1:
							data = data.data.user;
							console.log('执行获取信息成功', data);
							data.name = data.name.slice(0,4);
							that.logoImgPath=data.avatarUrl;
							that.userInfo=data;
							break;
						default:
							uni.showToast({
								title: data.message,
								icon: 'none'
							})
							break;
					}
				})
			},
			/*下载图片*/
			 logoImgPath: function (url) {
			    uni.downloadFile({
			      url: url,//网络路径
			      success: res => {
					  this.logoImgPath=res.tempFilePath;
			      }
			    });
			  },
			/*得到商户二维码*/
			 getMerchantCode: function (id) {
			    gyzjModel.prototype.merchantEwmCode(id).then((res) => {
			      if (res.code == 1) {
			        var array = wx.base64ToArrayBuffer(res.data);
			        var base64 = wx.arrayBufferToBase64(array);
			        this.data.base64 = base64;
			        this.setData({
			          code: "data:image/png;base64," + base64
			        })
			      }
			    })
			  },
			  /*得到用户二维码*/
			   getEwmCode:function (id) {
			      gyzjModel.prototype.infoEwmCode(id).then((res) => {
			        if (res.code == 1) {
						console.log('res的code的值',res);
			          var array = uni.base64ToArrayBuffer(res.data);
			          var base64 = uni.arrayBufferToBase64(array);
					  console.log('base64',base64);
			          this.base64 = base64;
			          this.code="data:image/png;base64," + base64;
			        }
			      })
			    },
		}

	}
</script>

<style>
	page {
	  width: 100%;
	  height: 100%;
	}
	.page {
	  width: 100%;
	  height: 100%;
	  position: relative;
	}
	.poater-main {
	  margin: 40upx 40upx 0 40upx;
	  background-color: #fff;
	  border-radius: 15upx;
	  display: flex;
	  flex-direction: column;
	}
	.poater-main-img {
	  width: 100%;
	  height: 650upx;
	  border-radius: 15upx 15upx 0upx 0upx;
	}
	.poater-main-info {
	  padding: 20upx;
	  height: 200upx;
	  display: flex;
	}
	.poater-main-ewm {
	  width: 120upx;
	  height: 120upx;
	}
	.info-left {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  margin-right: auto;
	}
	.info-left-name {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}.info-left-name text {
	  font-size: 38upx;
	  font-weight: 600;
	}
	.info-left-img {
	  width: 120upx;
	  height: 120upx;
	  border-radius: 50%;
	  margin-right: 20upx;
	}
	.info-left-details {
	  color: #f94c48;
	  font-size: 28upx;
	  margin-top: 10upx;
	}
	
	.info-right {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	}
	.info-right text {
	  color: #a9a9a9;
	  font-size: 28upx;
	  margin-top: 10upx;
	}
	
	.attention {
	  padding: 10upx 40upx;
	  color: #B8B8B8;
	  font-size: 28upx;
	}
	
	.poster-bottom {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  /* padding: 0 40upx; */
	  width: 100%;
	  height: 130upx;
	  display: flex;
	  align-items: center;
	  background-color: #fff;
	}
	.add-poster,
	.generate-poster {
	  height: 80upx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  background-color: #19AB18;
	  color: #fff;
	  border-radius: 10upx;
	}
	.add-poster {
	  width: 40%;
	  margin-right: 6%;
	  margin-left: 40upx;
	}
	.generate-poster {
	  width: 40%;
	  margin-right: 2%;
	}
	.share-poster {
	  width: 20%;
	  height: 80upx;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  padding: 0;
	  margin: 0;
	  line-height: 1;
	  border-radius: 0;
	  font-size: 28upx;
	}
	.share-poster image {
	  width: 40upx;
	  height: 40upx;
	  margin-bottom: 10upx;
	}
	.button-hover {
	  background-color: #fff;
	  color: rgba(0, 0, 0, 1);
	}
	.mask {
	  width: 300upx;
	  height: 300upx;
	}
	.mask image {
	  width: 100%;
	  height: 600upx;
	}
	.info-text {
	  padding: 0 20upx;
	  font-size: 28upx;
	  color:#a9a9a9;
	
	}
</style>
